<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推荐图书</title>
    <link rel="stylesheet" href="../css/mainiconfont.css">
    <link rel="stylesheet" href="../css/mainsame.css">
    <link rel="stylesheet" href="../css/mainSuggest.css">
</head>

<body>
    <div class="big">
        <!-- 头部 -->
        <div class="header">
            <header>
                <ul class="font_16">
                    <li><img src="../img/head_log.png" alt="" class="headLog"></li>
                    <li class="navActive"><a href="./index.html">首页</a></li>
                    <li><a href="./course.html">课程</a></li>
                    <li><a href="./question-index.html">题库</a></li>
                    <li class="teacherlibox">
                        讲师
                        <i class="iconfont icon-sanjiaodown"></i>
                        <ol class="teacherpullBox font_16">
                            <li>唯实名师</li>
                        </ol>
                    </li>
                    <li>资讯</li>
                    <li><a href="./material.html">教材</a></li>
                    <li>关于</li>
                </ul>
                <ul class="font_14">
                    <li>
                        <input type="text" placeholder="搜索课程">
                        <i class="iconfont icon-sousuo"></i>
                    </li>
                    <li>
                        <a href="./shoping.html">
                            <i class="iconfont icon-gouwuche2"></i>购物车
                        </a>
                    </li>
                    <li class="login"><a href="./login.html">登录</a></li>
                    <li class="logon"><a href="./logon.html">注册</a></li>
                    <li class="userliBox">
                        用户
                        <i class="iconfont icon-sanjiaodown"></i>
                        <ol class="userpullBox">
                            <li><a href="./user.html">个人中心</a></li>
                            <li class="logout">退出登录</li>
                        </ol>
                    </li>
                    <li>
                        <i class="iconfont icon-shouji"></i>
                        <i class="iconfont icon-sanjiaodown"></i>
                    </li>
                </ul>
            </header>
        </div>
        <section>
            <!-- 面包屑 -->
            <ul class="bread font_14 pad_l15_r15 color_34495e">
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li>图书列表</li>
                <li class="valName">专业知识</li>
            </ul>
            <!-- 图书详情 -->
            <div class="bookDetails pad_l15_r15 margin_t10">
                <div class="bookLeft">
                    <aside>
                        <img class="bookImg" src="../img/suggestBook.png" alt="">
                    </aside>
                </div>
                <div class="bookRight margin_l10">
                    <div class="bookName hLh30 pad_l10 font_20">中药知识</div>
                    <div class="bookPrice font_14 color_999 margin_t55 margin_b20">
                        <div class="colms6 pad_l15_r15">
                            售价：<span class="price color_e74c3c fontWb">999.9</span>
                        </div>
                        <div class="colms6 pad_l15_r15">
                            定价：￥<s class="Originalprice">999.9</s>
                        </div>
                    </div>
                    <ul class="bookMsg font_12 color_999 pad_l10">
                        <li>
                            <label>作者</label> &nbsp;:
                            <span class="author margin_l20">小韩</span>
                        </li>
                        <li>
                            <label>出版时间</label> &nbsp;:
                            <span class="margin_l20 publishTime">111</span>
                        </li>
                        <li>
                            <label>分类</label> &nbsp;:
                            <span class="type margin_l20">中药</span>
                        </li>
                        <li>
                            <label>购买数量</label> &nbsp;:
                            <ol class="margin_l20">
                                <li>
                                    <button class="jian notAllowed">
                                        <i class="iconfont icon-jianhao"></i>
                                    </button>
                                    <input class="inp" type="text" value="1">
                                    <button class="jia">
                                        <i class="iconfont icon-jiahao"></i>
                                    </button>
                                </li>
                                <li class="margin_l50">
                                    <label>库存数量</label> &nbsp;:
                                    <span class="inventory color_e74c3c font_16 margin_l20">4999</span>
                                </li>
                            </ol>
                        </li>
                    </ul>
                    <div class="bookBtns">
                        <div class="btns font_16 color_fff">
                            <div class="bgc_e74c3c">立即购买</div>
                            <div class="bgc_ffa200 addShopCar">加入购物车</div>
                        </div>
                        <div class="share color_999 font_14">
                            <i class="iconfont icon-fenxiang"></i>
                            <span>分享</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 图书简介nav -->
            <ul class="bookBigImgTitle font_16 color_333 pad_t10 margin_t20 pad_l15_r15">
                <li class="active">图书简介</li>
                <li>图书目录</li>
            </ul>
            <!-- 图书简介 -->
            <div class="bookBig pad_t10 margin_t20">
                <div class="bookBigImg dis_b">
                    <img src="../img/suggestBig.png" alt="">
                </div>
                <div class="bookBigContent font_12 color_4e4e4e">
                    <h4><b>第一章</b></h4>
                    <ul>
                        <li>目录一</li>
                        <li>目录二</li>
                        <li>目录三</li>
                    </ul>
                    <h4><b>第二章</b></h4>
                    <ul>
                        <li>目录一</li>
                        <li>目录二</li>
                        <li>目录三</li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- 底部 -->
        <footer class="color_666">
            <div class="footerContainer">
                <div class="footer1">
                    <div>
                        <ul class="colms3 color_666 font_12">
                            <li class="font_16 mtb_10">新手指南</li>
                            <li>如何注册</li>
                            <li>购课流程</li>
                            <li>付款方式</li>
                        </ul>
                        <ul class="colms3 color_666 font_12">
                            <li class="font_16 mtb_10">用户中心</li>
                            <li>账户设置</li>
                            <li>订单查询</li>
                        </ul>
                        <ul class="colms3 color_666 font_12">
                            <li class="font_16 mtb_10">常见问题</li>
                            <li>忘记密码</li>
                            <li>订单到账</li>
                            <li>播放问题</li>
                        </ul>
                        <ul class="colms3 color_666 font_12">
                            <li class="font_16 mtb_10">售后相关</li>
                            <li>意见反馈</li>
                            <li>隐私设置</li>
                        </ul>
                    </div>
                    <div class="font_14">
                        <div class="colms7">
                            <h6 class="mtb_10">
                                <i class="iconfont icon-dianhua_phone_bg"></i>
                                服务电话
                            </h6>
                            <div class="margin_l20 margin_t10">010-85859097</div>
                            <h6 class="margin_t10 ">
                                <i class="iconfont icon-xiaoxixinfengnews2"></i>
                                企业邮箱
                            </h6>
                            <div class="margin_l20 margin_t10">kefu@wyikao.com</div>
                        </div>
                        <div class="colms5">
                            <div class="margin_b20">
                                <i class="iconfont margin_r4 icon-shouji"></i>
                                下载APP
                            </div>
                            <div>
                                <i class="iconfont margin_r4 icon-weixin"></i>
                                微信&H5
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer2 margin_t20 font_14">友情链接：</div>
                <ul class="margin_t20 pad_t10 textAli_C font_12">
                    <li>
                        <span class="footLis">
                            <span>新手指南</span>
                            <i>|</i>
                        </span>
                        <span class="footLis">
                            <span>帮助中心</span>
                            <i>|</i>
                        </span>
                        <span class="footLis">
                            <span>意见反馈</span>
                        </span>
                        <span class="margin_l10">客服电话：010-85859097 Email：kefu@wyikao.com 工作时间：9:30-18:30</span>
                    </li>
                    <li class="mt5">©2017-2020北京唯新唯实教育科技有限公司 版权所有 <a href="http://beian.miit.gov.cn">京ICP备17035261号
                        </a>、京公网安备11010802018055</li>
                    <li class="mt5">
                        Powered By
                        <span>唯实教育</span>
                    </li>
                </ul>
            </div>
        </footer>
        <!-- 退出登录 -->
        <div class="logout-wp" style="display: none;">
            <div class="logout-box">
                <div class="logout-header">
                    <div class="logout-header__title">
                        <span>提示</span>
                    </div>
                    <button style="font-size: 25px;" class="logout-header__button close">×</button>
                </div>
                <div class="logout-content">
                    <div class="logout-content-container">
                        <div class="logout-content-message">
                            <p>确定退出登录吗</p>
                        </div>
                    </div>
                </div>
                <div class="logout-btns">
                    <button class="close">取消</button>
                    <button class="define">确定</button>
                </div>
            </div>
        </div>
    </div>


    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../js//jquery.cookie.js"></script>
    <script>
        let arr = window.location.search.substring(1).split('='),
            obj = {},
            baseUrl = 'http://localhost:2020';
        obj[arr[0]] = arr[1];
        let id = obj.bookId;
        let num = $('.inp').val();
        let val = {},
            cookieGet = $.cookie('loginToken');
        isToken();
        $.ajax({
            url: `${baseUrl}/question/getDeail`,
            type: 'get',
            timeout: 5000,
            data: {
                id: id,
            },
            success: ({
                data
            }) => {
                val = data.data[0];
                renderPage()
            }
        })

        // 退出登录，显示遮罩层
        $('.logout').on('click', function () {
            $('.logout-wp').show()
        })

        $('.close').on('click', function () {
            $('.logout-wp').hide()
        })

        $('.define').on('click', function () {
            logoutFn(cookieGet)
            $.cookie('loginToken', '');
            $('.logout-wp').hide()
            isToken()
        })

        // 加入购物车
        $('.addShopCar').on('click', function () {
            let ddForm = {};
            obj.num = $('.inp').val()
            localStorage.getItem('shoppingCar') || localStorage.setItem('shoppingCar', JSON.stringify([]))

            let arr = JSON.parse(localStorage.getItem('shoppingCar'));
            let existObj = arr.find(v => v.bookId == obj.bookId)
            if (existObj) {
                existObj.num = existObj.num * 1 + $('.inp').val() * 1
            } else {
                arr.push(obj)
            }
            let Wxindex = arr.filter(v => v.bookId == obj.bookId)
            ddForm.cid = val.id
            ddForm.dingdan = 'realit' + new Date().getTime()
            ddForm.name = val.name
            ddForm.price = val.price
            ddForm.num = obj.num
            ddForm.zhuangtai = '0'
            if (!existObj) {
                $.ajax({
                    url: "http://localhost:2020/jiesuan/addList",
                    type: "POST",
                    data: ddForm,
                    success(res) {
                        console.log(res)
                    }
                })
            } else {
                console.log(1)
                ddForm.num = existObj.num
                $.ajax({
                    url: "http://localhost:2020/jiesuan/updateList",
                    type: "POST",
                    data: ddForm,
                    success(res) {
                        console.log(res)
                    }
                })
            }
            localStorage.setItem('shoppingCar', JSON.stringify(arr))
        })

        // input的失去焦点事件框中num
        $('.inp').on('change', function () {
            if ($(this).val() > val.inventory) {
                alert('超量了')
                $('.inp').prop('value', 1);
                return
            }
            renderPage()
        })

        // tab切换
        $('.bookBigImgTitle>li').on('click', function () {
            let idx = $(this).index();
            $(this).addClass('active').siblings().removeClass('active')
            $('.bookBig>div').eq(idx).fadeIn().siblings().fadeOut()
        })

        // 加的点击事件
        $('.jia').on('click', function () {
            if ($('.inp').val() == val.inventory) {
                return
            }
            num++;
            $('.inp').prop('value', num);
        })

        // 减的点击事件
        $('.jian').on('click', function () {
            if (num == 1) {
                $('.jian').addClass('notAllowed')
                return
            } else {
                $('.jian').removeClass('notAllowed')
            }
            num--;
            $('.inp').prop('value', num);
        })

        // 导航条的点击事件
        $('.teacherlibox').on('click', function () {
            $('.teacherpullBox').toggle();
        });

        // 用户的点击事件
        $('.userliBox').on('click', function () {
            $('.userpullBox').toggle()
        })

        // 点击body导航条里的ol隐藏
        $('body').on('click', function (e) {
            console.log(e.target.className);
            if (e.target.className != "teacherlibox") {
                $('.teacherpullBox').hide()
            }
            if (e.target.className != "userliBox") {
                $('.userpullBox').hide()
            }
        })

        // 是否有token
        function isToken() {
            if (!$.cookie('loginToken')) {
                $('.login').show()
                $('.logon').show()
                $('.userliBox').hide()
            } else {
                $('.login').hide()
                $('.logon').hide()
                $('.userliBox').show()
            }
        }

        // 渲染页面
        function renderPage() {
            // console.log(val);
            $('.valName').html(val.name)
            $('.bookName').html(val.name)
            $('.price').html(val.price)
            $('.Originalprice').html(val.Originalprice)
            $('.author').html(val.author)
            $('.publishTime').html(val.publishTime)
            $('.type').html(val.type)
            $('.inventory').html(val.inventory)
        }
    </script>
</body>

</html>